<template>
  <div class="addToCart">
    <!--//加减号按钮样式-->
    <div v-if="type ==1 " class="edit_data" style="position:static;">
      <transition neme="slide-fade" tag="span"
                  enter-active-class="transition-active"
                  leave-active-class="delate-transition-active"
                  enter-class="del-transition-position"
                  leave-to-class="del-transition-position">
        <i v-if="number > 0" class="del_cart " @click.stop="$emit('subFromCart')"></i>
      </transition>
      
      <transition name="slide-fade" tag="span"
                  enter-active-class="delate-transition-active"
                  leave-active-class="transition-active"
                  enter-class="num-transition-position"
                  leave-to-class="num-transition-position">
        <span v-if="number > 0 " class="cjy-add-cart-num" style="text-align: center; color:black">
          {{number}}{{goodsUnit}}
      </span>
      </transition>
      <i class="add_to_cart " @click.stop="$emit('addToCart')"></i>
    </div>

    <!--//购物测按钮添加（只能添加）-->
    <div v-if="type == 2" class="" @click.stop="$emit('addToCart')">
      <i class="icon njfont nj-gouwuche"></i>
    </div>

    <!--//购物测按钮添加（只能添加）-->
    <div v-if="type == 2.1" class="" @click.stop="$emit('addToCart')"
               style="position: relative;width:1.2rem;height: 1.2rem">
    <i style="font-size: 1.4rem;color: #EF5423; " class="icon njfont nj-jiagouwuche cjy-center  cjy-animateDeleay"
       :style=" !stockCount ?{color:'rgb(128, 128, 128)'}:''"
       :class="{'addAnimaite': isaddAnimaite}"></i>
  </div>

    <div v-if="type == 2.2" class="" @click.stop="$emit('addToCart')"
         style="position: relative;width:1.2rem;height: 1.2rem">
      <i style="font-size: 1.2rem;color:#EF5423; " class="icon njfont nj-jiagouwuche cjy-center  cjy-animateDeleay"
         :style=" !stockCount ?{color:'rgb(128, 128, 128)'}:''"
         :class="{'addAnimaite': isaddAnimaite}"></i>
    </div>

    <div v-if="type == 2.51" class="" @click.stop="$emit('addToCart')"
         style="position: relative;width:1.2rem;height: 1.2rem">
      <i style="font-size: 1.2rem;color:#EF5423; " class="icon njfont nj-jiagouwuche cjy-center  cjy-animateDeleay"
         :class="{'addAnimaite': isaddAnimaite}"></i>
    </div>
    <div v-if="type == 2.52" class=""
         style="position: relative;width:1.2rem;height: 1.2rem">
      <i style="font-size: 1.2rem;color:#EF5423; " class="icon njfont nj-jiagouwuche cjy-center  cjy-animateDeleay"
         :class="{'addAnimaite': isaddAnimaite}"></i>
    </div>


    <!--文字（加入购物）按键-->

    <div v-if="type == 3">
      <div v-if="number == 0" class="aui-btn aui-btn-danger aui-btn-sm " style="position:static;"
           @click.stop="$emit('addToCart')">加入购物车
      </div>
      <div v-else class="edit_data" style="position:static;">
        <i class="del_cart" @click.stop="$emit('subFromCart')"></i>
        <span class="cjy-add-cart-num" style="text-align: center; color:black;">
          {{number}}{{goodsUnit}}
          <!--{{goodsType ? 'g' : ''}}-->
      </span>
        <i class="add_to_cart " @click.stop="$emit('addToCart')"></i>
      </div>
    </div>

    <div v-if="type == 4 " class="edit_data" style="position:static;">
      <i class="del_cart " @click.stop="$emit('subFromCart')" style="border-radius:50%"></i>
      <span class="cjy-add-cart-num" style="text-align: center; color:black;">
          {{number}}{{goodsUnit}}
      </span>
      <i class="add_to_cart " @click.stop="$emit('addToCart')" style="border-radius:50%">
      </i>
    </div>

    <div v-if="type == 4.1 " class="edit_data" style="position:static;">
      <i class="del_cart " @click.stop="$emit('subFromCart')" style="border-radius:50%"></i>
      <span class="cjy-add-cart-num" style="text-align: center; color:black;">
          {{number}}{{goodsUnit}}
      </span>
      <i class="add_to_cart  " :class="{pp:isStockCountOver}" @click.stop="$emit('addToCart')" style="border-radius:50%"
      ></i>
    </div>

    <div v-if="type == 5 " class="edit_data" style="position:static;">
      <transition neme="slide-fade" tag="span"
                  enter-active-class="transition-active"
                  leave-active-class="delate-transition-active"
                  enter-class="del-transition-position"
                  leave-to-class="del-transition-position">
        <i v-if="number > 0" class="del_cart " @click.stop="$emit('subFromCart')" style="border-radius: 50%"></i>
      </transition>

      <transition name="slide-fade" tag="span"
                  enter-active-class="delate-transition-active"
                  leave-active-class="transition-active"
                  enter-class="num-transition-position"
                  leave-to-class="num-transition-position">

        <span v-if="number > 0 " class="cjy-add-cart-num" style="max-widht:none;text-align: center; color:black;">
          {{number}}{{goodsUnit}}
      </span>
      </transition>
      <i class="add_to_cart " style="border-radius: 50%" @click.stop="$emit('addToCart')"></i>
    </div>

    <!--按键样式6-->
    <div v-if="type == 6 && !stockCount">
      <div  class="aui-btn aui-btn-danger aui-btn-sm "
           style="position:static;background: #D7D7D7!important;">已售罄
      </div>
      <!--<div v-else class="edit_data" style="position:static;">-->
        <!--<i class="del_cart" @click.stop="$emit('subFromCart')" style="border-radius: 50%"></i>-->
        <!--<span class="cjy-add-cart-num" style="text-align: center; color:black;">-->
          <!--{{number}}{{goodsUnit}}-->
      <!--</span>-->
        <!--<i class="add_to_cart " @click.stop="$emit('addToCart')" style="border-radius: 50%"></i>-->
      <!--</div>-->
    </div>

    <div v-else-if="type == 6 && number > 0" class="edit_data" style="position:static;">

      <i class="del_cart " @click.stop="$emit('subFromCart')" style="border-radius: 50%"></i>
      <span class="cjy-add-cart-num" style="max-widht:none;text-align: center; color:black;">
          {{number}}{{goodsUnit}}
      </span>
      <i class="add_to_cart " style="border-radius: 50%" @click.stop="$emit('addToCart')"></i>
    </div>
    <div v-else-if="type == 6 && number == 0" class="" @click.stop="$emit('addToCart')"
         style="position: relative;width:1.2rem;height: 1.2rem;right: 0.5rem">
      <i style="font-size: 1.6rem;color: #EF5423;" class="icon njfont nj-jiagouwuche cjy-center  cjy-animateDeleay"></i>
    </div>
  </div>


</template>

<script>
  // import Hello from './components/Hello'

  export default {
    data () {
      return {
        isaddAnimaite: false,
      }
    },
    props: {
      goodsType: {
        type: Number,
        default: 0
      },
      number: {
        type: Number,
        default: 0
      },
      type: {
        type: Number,
        default: 2
      },
      stockCount: {
        type: Boolean,
        default: false
      },
      isStockCountOver: {
        type: Boolean,
        default: false
      },
      weightType: {
        type: Number,
        default: 7
      },
      fontSize: {
        default: "1.2rem"
      }
    },
    components: {},
    created () {

    },
    mounted () {
      
    },
    methods: {
      animateChaneg() {
        setTimeout(() => {
          this.isaddAnimaite = true
          setTimeout(() => {
            this.isaddAnimaite = false
          }, 200)
        }, 200)
      },
      gotoDetail () {
        this.$router.push({path: 'detail', query: {code: this.goodsCode}})
      },
    },
    computed: {
      goodsUnit () {
        var goodsUnit = ''
        var goodsType = this.goodsType
        if (goodsType == this.weightType) {
          goodsUnit = 'g'
        }
        return goodsUnit
      }
    },
    watch: {
      number() {
        this.animateChaneg()

      }
    },
  }
</script>

<style scoped>

  .del-transition-position {
    transform: translatex(3rem);
    /*opacity: 0.5*/
  }

  .num-transition-position {
    transform: translatex(1.3rem);
  }

  .transition-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .delate-transition-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .nj-gouwuche {
    position: absolute;
    bottom: 0rem;
    right: 0.4rem;
    width: 1.8rem;
    height: 1.8rem;
    background: #EF5423;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    line-height: 1.8rem;
    font-size: 1.2rem !important;
  }

  .addToCart {
    height: 1.3rem;
    position: absolute;
    top: 0;
    margin: auto;
    bottom: 0;
    right: 0;
  }

  .cjy-add-cart-num {
    width: auto;
    white-space: nowrap;
  }

  .addAnimaite {

    transform: scale(1.2, 1.2);
  }

  .cjy-center {
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
  }

  .cjy-animateDeleay {
    transition: 0.2s;
  }


</style>
<style>
  .add_to_cart.pp:after, .add_to_cart.pp:before {
    background: #a0a0a0 !important;
  }

  .add_to_cart.pp {
    border: 1px solid #a0a0a0 !important;
  }
</style>
